<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="struts" uri="/struts-tags" %>
<html>
<head>
    <title>配置权限</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script language="javascript" src="${pageContext.request.contextPath}/OfficeAuto/script/jquery.js"></script>
    <script language="javascript" src="${pageContext.request.contextPath}/OfficeAuto/script/pageCommon.js"
            charset="utf-8"></script>
    <script language="javascript" src="${pageContext.request.contextPath}/OfficeAuto/script/PageUtils.js"
            charset="utf-8"></script>
    <link type="text/css" rel="stylesheet"
          href="${pageContext.request.contextPath}/OfficeAuto/style/blue/pageCommon.css"/>
    <script language="javascript"
            src="${pageContext.request.contextPath}/OfficeAuto/script/jquery_treeview/jquery.treeview.js"></script>
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/OfficeAuto/style/blue/file.css"/>
    <link type="text/css" rel="stylesheet"
          href="${pageContext.request.contextPath}/OfficeAuto/script/jquery_treeview/jquery.treeview.css"/>

    <script type="text/javascript">
        $(function(){
        //为所有的复选框绑定单机事件
            $('input[name=privilegeId]').click(function(){
                //当选中一个权限是自动选中他的下级权限，当取消他的权限时自动取消他的下级权限
                $(this).siblings("ul").find("input").attr("checked",this.checked);
                if(this.checked){
                    $(this).parents("ul").siblings("input").attr("checked",this.checked);
                }
                else{
                    var size=$(this).parent("li").siblings("li").children("input:checked").size();
                    if(size==0){
                        $(this).parent("li").parent("ul").siblings("input").attr("checked",false);
                        $(this).parent("li").parent("ul").parent("li").siblings("input").attr("checked",false);
                    }
                }
            })

        })
    </script>
</head>
<body>

<!-- 标题显示 -->
<div id="Title_bar">
    <div id="Title_bar_Head">
        <div id="Title_Head"></div>
        <div id="Title"><!--页面标题-->
            <img border="0" width="13" height="13"
                 src="${pageContext.request.contextPath}/style/images/title_arrow.gif"/> 配置权限
        </div>
        <div id="Title_End"></div>
    </div>
</div>

<!--显示表单内容-->
<div id=MainArea>
    <struts:form action="privilege_setPrivilege!set.do?roleId=%{id}" namespace="/" method="post">
        <div class="ItemBlock_Title1"><!-- 信息说明 -->
            <div class="ItemBlock_Title1">
                <img border="0" width="4" height="7"
                     src="${pageContext.request.contextPath}/OfficeAuto/style/blue/images/item_point.gif"/> 正在为【${name }】配置权限
            </div>
        </div>

        <!-- 表单内容显示 -->
        <div class="ItemBlockBorder">
            <div class="ItemBlock">
                <table cellpadding="0" cellspacing="0" class="mainForm">
                    <!--表头-->
                    <thead>
                    <tr align="LEFT" valign="MIDDLE" id="TableTitle">
                        <td width="300px" style="padding-left: 7px;">
                            <!-- 如果把全选元素的id指定为selectAll，并且有函数selectAll()，就会有错。因为有一种用法：可以直接用id引用元素 -->
                            <input type="CHECKBOX" id="cbSelectAll"
                                   onclick="$('input[name=privilegeId]').attr('checked',this.checked)"/>
                            <label for="cbSelectAll">全选</label>
                        </td>
                    </tr>
                    </thead>

                    <!--显示数据列表-->
                    <tbody id="TableData">
                    <tr class="TableDetail1">
                        <!-- 显示权限树 -->
                        <td>
                                <%--
                                                                <struts:checkboxlist name="privilegeId" list="privilege" listKey="id" listValue="name">
                                                                </struts:checkboxlist>--%>
    <ul id="privilegeTree">
       <struts:iterator value="privilege">
          <li>
             <input <struts:property value="id in privilegeId ? 'checked':''"/> type="checkbox" name="privilegeId" id="show" value="${id}">${name}
                <ul><struts:iterator value="children">
                    <li>
                        <input <struts:property value="id in privilegeId ? 'checked':''"/> type="checkbox"name="privilegeId" value="${id}">${name}
                            <ul><struts:iterator value="children">
                                <li>
                                    <input <struts:property value="id in privilegeId ? 'checked':''"/> type="checkbox" name="privilegeId" value="${id}">${name}
                                    <br/>
                                </li>
                                </struts:iterator>
                            </ul>
                    </li>
                    </struts:iterator>
                </ul>
          </li>
       </struts:iterator>
    </ul>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- 表单操作 -->
        <div id="InputDetailBar">
            <input type="image" src="${pageContext.request.contextPath}/OfficeAuto/style/images/save.png"/>
            <a href="javascript:history.go(-1);"><img
                    src="${pageContext.request.contextPath}/OfficeAuto/style/images/goBack.png"/></a>
        </div>
    </struts:form>
</div>

<div class="Description">
    说明：<br/>
    1，选中一个权限时：<br/>
    &nbsp;&nbsp;&nbsp;&nbsp; a，应该选中 他的所有直系上级。<br/>
    &nbsp;&nbsp;&nbsp;&nbsp; b，应该选中他的所有直系下级。<br/>
    2，取消选择一个权限时：<br/>
    &nbsp;&nbsp;&nbsp;&nbsp; a，应该取消选择 他的所有直系下级。<br/>
    &nbsp;&nbsp;&nbsp;&nbsp; b，如果同级的权限都是未选择状态，就应该取消选中他的直接上级，并递归向上做这个操作。<br/>

    3，全选/取消全选。<br/>
    4，默认选中当前岗位已有的权限。<br/>
</div>
<script type="text/javascript">
    $("#privilegeTree").treeview();
</script>
</body>
</html>
